<template>
  <div class="publisher-history">
    <div class="header">
      <div class="title">往期回顾</div>
      <div class="view-all">全部</div>
    </div>
    
    <div class="news-list">
    <div 
      class="news-item" 
      v-for="(news, index) in newsList" 
      :key="index"
    >
      <div class="news-title" @click="goToDetail(news.news_id)">{{ news.news_title }}</div>
      <div class="news-time">{{ news.news_time }}</div>
    </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PublisherHisory',
  components: {},
  props: {
    publisherName: {
      type: [String, Number],
      default: ''
    },
  },
  data() {
    return {
      newsList: [
        {
          news_title: '"我新买的车在高速上突然失控，到底啥原因？"车主要求极氪官方出具事故检测报告，提出赔偿',
          news_time: '2025-03-28 08:44',
          news_id: "1"
        },
        {
          news_title: '河北唐山市古冶区发生2.5级地震',
          news_time: '2025-03-28 08:44',
          news_id: "2"
        },
        {
          news_title: '普京涉乌表态升级：俄军会将乌军彻底击溃',
          news_time: '2025-03-28 08:34',
          news_id: "3"
        }
      ]
    }
  },
  methods: {
    getHistoryNews(userName){
      // console.log(userName);
      this.$api.serviceNews.post('api/news/historyNewsT', {"userName": userName}, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then(response => {
        if (response.data.code == 200){
          this.newsList = response.data.data
        }
      })
      .catch(error => {
        console.error('失败', error);
      });
    },
    goToDetail(news_id) {
      // 核心修复：添加try-catch并移除go(0)
      try {
        this.$router.replace({
          name: 'detail',
          params: { news_id },
        });
      } catch (err) {
        if (err.name !== 'NavigationDuplicated') {
          console.error('导航失败:', err);
        }
      }
    }
  },
  mounted() {
    // 数据有延迟，需要监控
    // 加延迟确保数据到达
    this.$nextTick(() => {
      this.getHistoryNews();
    });
  },
  watch: {
    // 添加监听确保数据变化后执行
    publisherName(newVal) {
      // console.log(newVal);
      if(newVal) this.getHistoryNews(newVal);
    }
  }
}
</script>

<style scoped>
.publisher-history {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #333;
  max-width: 300px;
  margin: 0 auto;
  margin-top: 30px;
  /* padding: 20px; */
  background-color: #fff;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 20px;
  font-weight: 600;
}
.view-all {
  color: #666;
  font-size: 14px;
}
.news-item {
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.news-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.news-title {
  /* 关键样式 */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;

  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}
.news-time {
  color: #999;
  font-size: 12px;
}

/* 新增的悬停效果 */
.news-item:hover .news-title {
  color: #ff4d4f;
}
</style>